<template>
  <div class="pictureCommentModal">
    <a-modal
      :open="visible"
      :footer="false"
      @cancel="closeModal"
      :width="700"
      :maskClosable="false"
      class="custom-modal"
    >
    <!-- 标题 -->
    <template #title>
      <h2 class="modal-title">  <!-- 仅添加样式类 -->
        评论 （{{ props.picture.commentCount ?? '-' }}）
      </h2>
    </template>

    <!-- 评论列表区域：只渲染一级评论，子评论由CommentItem递归处理 -->
    <div class="comment-section">
      <!-- 加载态 -->
      <a-spin v-if="loading" style="display: block; text-align: center" />

      <!-- 一级评论列表（数据驱动）使用 CommentItem 渲染，子评论自动递归 -->
      <a-list v-else :data-source="commentTree" item-layout="horizontal" class="comment-list">  <!-- 仅添加样式类 -->
        <template #renderItem="{ item }">
          <CommentItem
            :comment="item"
            :login-user="loginUser"
            :reply-target="replyTarget"
            :reply-content="replyContent"
            @update:replyContent="newValue => replyContent = newValue"
            @handle-like="handleLike"
            @handle-reply="handleReply"
            @handle-delete="handleDelete"
            @cancel-reply="cancelReply"
            @send-reply="sendReply"
          />
        </template>
      </a-list>

      <!-- 无评论提示 -->
      <div v-if="!loading && commentTree.length === 0" class="no-comments">
        还没有评论，快来发表你的看法吧~
      </div>
    </div>

    <!-- 发布新评论（一级评论） -->
    <div class="publish-section" v-if="loginUser">
      <a-comment class="new-comment-container">
        <template #avatar>
          <a-avatar :src="loginUser.userAvatar" class="user-avatar" />  <!-- 仅添加样式类 -->
        </template>
        <template #content>
          <a-textarea
            v-model:value="newComment"
            :rows="2"
            placeholder="写下你的评论..."
            @pressEnter="sendComment"
            class="new-comment-input"
          />
          <div style="margin-top: 8px">
            <a-button type="primary" @click="sendComment" class="submit-btn">发布</a-button>  <!-- 仅添加样式类 -->
          </div>
        </template>
      </a-comment>
    </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, withDefaults, defineExpose, onMounted, computed } from 'vue'
import dayjs from 'dayjs'
import { useLoginUserStore } from '@/stores/userLogin'
import { message } from 'ant-design-vue'
// 引入实际接口（需替换为项目真实接口）
import {
  listCommentVoByPageUsingPost,
  addCommentUsingPost,
  deleteCommentUsingPost,
} from '@/api/commentController'
import CommentItem from '@/components/item/CommentItem.vue'
import { addLikedUsingPost } from '@/api/likedController'
import { PICTURE_LIKE_ENUM } from '@/constants/picture'

/**
 * 定义组件属性类型
 */
interface Props {
  picture: API.PictureVO
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  picture: () => ({}), // 修复：提供默认空对象
})

// ========== 基础状态 ==========
// 模态框可见性
const visible = ref(false)
// 打开弹窗
const openModal = () => (visible.value = true)
// 关闭弹窗
const closeModal = () => (visible.value = false)
// 暴露函数给父组件
defineExpose({ openModal })

// 当前登录用户信息
const loginUser = ref<API.UserVO>()
const getLoginUser = () => {
  loginUser.value = useLoginUserStore().loginUser
}

// ========== 评论数据：扩展CommentVO，增加递归所需的 children和 expanded ==========
// 扩展 CommentVO，添加树形结构和交互属性
interface CommentExtendVO extends API.CommentVO {
  children?: CommentExtendVO[] // 子评论列表（支持无限层级）
  expanded?: boolean // 控制当前评论的子评论展开/收起
}

// 一级评论列表（树形结构）
const commentTree = ref<CommentExtendVO[]>([])
// 加载状态
const loading = ref(false)

/**
 * 获取评论列表并构建树形结构
 */
const getCommentList = async () => {
  loading.value = true
  const res = await listCommentVoByPageUsingPost({
    current: 1,
    pageSize: 12,
    pictureId: props.picture.id,
  })
  if (res.data.code === 0 && res.data.data?.records) {
    // 构建树形结构
    commentTree.value = buildCommentTree(res.data.data.records as API.CommentVO[])
  } else {
    message.error('获取评论列表失败,' + res.data.message)
  }
  loading.value = false
}

/**
 * 构建评论树（平级转树形）
 * @param comments 平级评论列表
 * @returns 树形结构的评论列表
 */
const buildCommentTree = (comments: API.CommentVO[]): CommentExtendVO[] => {
  // 1. 用 Map 存储所有评论（key：评论id，value：扩展后的评论对象）
  const commentMap = new Map<number, CommentExtendVO>()

  // 2. 初始化所有评论（添加 children 和 expanded）
  comments.forEach((comment) => {
    const extendComment: CommentExtendVO = {
      ...comment,
      children: [],
      expanded: false,
      user: comment.user || {},
    }
    if (comment.id != null) {
      commentMap.set(comment.id, extendComment)
    }
  })

  // 3. 关联父子评论
  const rootComments: CommentExtendVO[] = []
  comments.forEach((comment) => {
    if (comment.id != null) {
      const currentComment = commentMap.get(comment.id)!
      if (comment.fatherId == null) {
        // fatherId为null：一级评论，加入根列表
        rootComments.push(currentComment)
      } else {
        // fatherId不为null：找到父评论，加入父评论的 children
        const parent = commentMap.get(comment.fatherId)
        if (parent) {
          parent.children?.push(currentComment)
        }
      }
    }
  })
  return rootComments
}

// ========== 交互逻辑 ==========
// 新评论内容
const newComment = ref('')
// 当前回复的目标评论
const replyTarget = ref<CommentExtendVO | null>(null)
// 回复内容
const replyContent = ref('')

/**
 * 时间格式化
 */
const formatTime = (time: Date) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

/**
 * 判断是否有权限删除评论
 */
const canDelete = (comment: CommentExtendVO) => {
  if (!loginUser.value) return false
  // 自身评论或管理员可删
  return loginUser.value.id === comment.userId || loginUser.value.userRole === 'admin'
}

/**
 * 点赞：实时更新点赞状态和点赞数，接口失败自动回滚
 */
const handleLike = async (comment: CommentExtendVO) => {
  // 1. 状态兜底：避免 isLike/likeCount 为 null/undefined 导致异常
  const currentIsLike = comment.isLike ?? false; // 当前是否已点赞
  const currentLikeCount = Number(comment.likeCount ?? 0); // 强制转为数字类型
  try {
    // 2. 预更新本地状态（优化用户体验：点击立即反馈，不用等接口）
    comment.isLike = !currentIsLike; // 切换是否点赞状态
    // 根据操作更新点赞数：未点赞→+1，已点赞→-1
    comment.likeCount = currentIsLike ? currentLikeCount - 1 : currentLikeCount + 1;
    // 3. 调用点赞接口（后端同步Redis数据）
    const res = await addLikedUsingPost({
      commentId: comment.id,
      target: PICTURE_LIKE_ENUM.COMMENT
    });
    // 4. 接口失败：回滚本地状态（避免数据不一致）
    if (res.data.code !== 0 || !res.data.data) {
      throw new Error("点赞接口调用失败");
    }
    // 5. 接口成功：提示用户
    message.success(comment.isLike ? '点赞成功 ' : '取消点赞成功');
  } catch (e) {
    // 6. 异常处理：回滚本地状态，提示错误
    comment.isLike = currentIsLike; // 回滚是否点赞状态
    comment.likeCount = currentLikeCount; // 回滚点赞数
    message.error('点赞操作失败，请稍后再试');
    console.log("点赞接口异常：", e);
  }
}

/**
 * 回复：激活回复输入框
 */
const handleReply = (comment: CommentExtendVO) => {
  replyTarget.value = comment
  replyContent.value = ''
}

/**
 * 取消回复
 */
const cancelReply = () => {
  replyTarget.value = null
  replyContent.value = ''
}

/**
 * 发送回复
 */
const sendReply = async () => {
  // 安全处理：如果不是字符串，用空字符串兜底
  console.log('当前回复内容：', replyContent.value)
  const content = (replyContent.value || '').trim()
  // 校验逻辑修改为使用处理后的 content
  if (!content || !replyTarget.value || !loginUser.value) return

  try {
    await addCommentUsingPost({
      content: content,  // 使用处理后的 content
      pictureId: props.picture.id,
      fatherId: replyTarget.value.id,
      userId: loginUser.value.id,
    })
    message.success('回复成功')
    cancelReply()
    await getCommentList()
  } catch (e) {
    message.error('回复失败')
  }
}

/**
 * 发布新评论（一级评论）
 */
const sendComment = async () => {
  if (!newComment.value.trim() || !loginUser.value){
    return
  }
  try {
    const res = await addCommentUsingPost({
      content: newComment.value,
      pictureId: props.picture.id,
      userId: loginUser.value!.id,
    })
    if(res.data.code === 0 && res.data.data){
      message.success('评论成功')
      newComment.value = ''
      await getCommentList() // 刷新评论
    }else {
      message.error('评论失败,' + res.data.message)
    }
  } catch (e) {
    message.error('服务器异常')
  }
}

/**
 * 删除评论
 */
const handleDelete = async (comment: CommentExtendVO) => {
  try {
    await deleteCommentUsingPost({ id: comment.id }) // 调用删除接口
    message.success('删除成功')
    await getCommentList() // 刷新评论
  } catch (e) {
    message.error('删除失败')
  }
}

// ========== 生命周期 ==========
onMounted(() => {
  getLoginUser() // 获取登录用户
  getCommentList() // 初始化评论列表
})

// 导出CommentExtendVO类型，供CommentItem组件使用
export type { CommentExtendVO }
</script>

<style scoped>
/* 模态框整体样式优化 */
.pictureCommentModal{
  position: relative; /* 确保子元素绝对定位时的参考 */
  min-height: 100vh;  /* 兜底：让组件占满视口高度 */
}

/* 4. 穿透到 Modal 内容（现在 Modal 在组件内，scoped 样式可生效） */
.custom-modal {
  :deep(.ant-modal-content) {
    min-height: 1200px !important; /* 强制覆盖，确保生效 */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
  }

  :deep(.ant-modal-body) {
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px 24px;
  }

  :deep(.ant-modal-header) {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 24px;
  }
}

/* 标题样式 */
.modal-title {
  text-align: center;
  font-weight: 600;
  color: #333;
  margin: 0;
  font-size: 18px;
}

/* 评论区域样式 */
.comment-section {
  max-height: 500px;
  overflow-y: auto;
  padding: 8px 0;
}

.comment-list {
  .ant-list-items {
    padding: 0;
  }
}

/* 无评论提示 */
.no-comments {
  text-align: center;
  padding: 40px 0;
  color: #999;
  background-color: #fafafa;
  border-radius: 8px;
  margin: 10px 0;
}

/* 发布新评论区域 */
.publish-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #eee;
}

.new-comment-container {
  .ant-comment-content {
    margin-left: 12px;
  }
}

.user-avatar {
  border: 1px solid #eee;
}

.new-comment-input {
  /* 一级评论输入框调整 */
  .new-comment-input {
    min-height: 50px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
  }

  &:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
}

/* 发布评论按钮优化 */
.submit-btn {
  height: 28px !important; /* 降低按钮高度 */
  padding: 0 16px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  transition: all 0.2s !important;
}

.submit-btn:hover {
  background-color: #096dd9 !important;
  border-color: #096dd9 !important;
}
</style>
